<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!-- saved from url=(0062)http://localhost:8080/endPoint/MessageServlet?mytext=%E5%A4%A9 -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jquery-3.7.1.js"></script>


    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style type="text/css">
    @keyframes animate_dots {
        0% {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    @-webkit-keyframes animate_dots {
        0% {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    .dot0,
    .dot1 {
        animation: animate_dots 0.9s infinite;
        -moz-animation: animate_dots 0.9s infinite;
        -webkit-animation: animate_dots 0.9s infinite;
        -o-animation: animate_dots 0.9s infinite;
    }

    .dot1 {
        animation-delay: 0.2s;
        -webkit-animation-delay: 0.2s;
    }

    .dot2 {
        animation: animate_dots 0.9s infinite;
        -moz-animation: animate_dots 0.9s infinite;
        -webkit-animation: animate_dots 0.9s infinite;
        -o-animation: animate_dots 0.9s infinite;
        animation-delay: 0.4s;
        -webkit-animation-delay: 0.4s;
    }

    .dots_item {
        display: inline-block;
        margin-right: 5px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #4886ff;
    }

    .verify-icon {
        position: absolute;
        width: 100%;
        margin-top: 70px;
        text-align: center;
    }

    .t-embed-loading {
        position: relative;
        width: 300px;
        height: 230px;
        background-color: #fff;
    }

    .t-embed-dots {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -22.5px;
        margin-top: -5px;
    }

    .t-embed-dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 5px;
        background: #4886ff;
    }

    .t-mask {
        width: 100%;
        height: 100%;
        position: fixed;
        _position: absolute;
        left: 0;
        top: 0;
        background: #000;
        opacity: 0.5;
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
        z-index: 2000000000;
    }

    .pin-nav-wrap {
        position: relative;
        top: 0;
    }

    .pin-nav-wrap {
        background-image: url(image/3b7c19a0ba08bb4a9dbf2cf0d98b4c0.png);
        background-repeat: no-repeat;
        position: relative;
        background-size: cover;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
        height: 200px;
        left: 0;
        top: -0px;
        transform: translateZ(10px);
        transition: all .5s;
        width: 100%;
        margin: auto;
        z-index: 100000;
    }

    body {
        -webkit-font-smoothing: antialiased;
        -moz-font-smoothing: antialiased;
        background: #fff;
        color: #262626;
        font-family: PingFangSC-Regular, HelveticaNeue-Light, Helvetica Neue Light, Microsoft YaHei, "sans-serif";
        text-align: left;
    }

    .pin-nav-wrap .box-center {
        background: #3e3d43;
    }

    .cf {
        zoom: 1;
    }

    @media (max-width: 1280px) {
        .box-center {
            margin: 0 auto;
            width: 990px;
        }
    }

    .box-center {
        margin-left: auto;
        margin-right: auto;
        width: 1200px;
    }

    .pin-nav-wrap .nav-list {
        height: 42px;
        margin-left: -10px;
    }

    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

    .fl li {
        display: inline-block;
    }

    .fr li {
        display: inline-block;
    }

    li,
    ol,
    ul {
        list-style: none outside none;
    }

    .pin-nav-wrap .nav-list li.site {
        margin-right: 28px;
        width: 95px;
    }

    .pin-nav-wrap .nav-list li.site a.pin-logo {
        background-image: url();
        background-position: 10px 48%;
        background-repeat: no-repeat;
        display: block;
        height: 42px;
        width: 95px;
    }

    .pin-nav-wrap .nav-list li.site a {
        color: #fff;
        width: 95px;
    }

    .pin-nav-wrap .nav-list li a {
        color: #ccc;
        display: block;
        font: 14px / 42px PingFangSC-Regular, HelveticaNeue-Light, Helvetica Neue Light, Microsoft YaHei, "sans-serif";
        height: 42px;
        overflow: hidden;
        padding: 0 15px;
        position: relative;
    }

    .loaded a {
        transition: color .3s, background-color .3s;
    }

    a {
        color: #262626;
        outline: none;
        text-decoration: none;
    }

    a,
    blockquote,
    body,
    dd,
    div,
    dl,
    dt,
    fieldset,
    form,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    input,
    li,
    ol,
    p,
    pre,
    td,
    textarea,
    th,
    ul {
        margin: 0;
        padding: 0;
    }

    .pin-nav-wrap .nav-list li a span {
        border-color: #ccc transparent currentcolor;
        border-style: solid solid none;
        border-width: 4px 4px 0;
        height: 0;
        position: absolute;
        right: 10px;
        top: 19px;
        transition: all .2s;
        width: 0;
    }

    .pin-nav-wrap .nav-list li.site .dropdown {
        width: 125px;
    }

    .pin-nav-wrap .nav-list li .dropdown {
        box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
        display: none;
        position: relative;
    }

    .pin-nav-wrap .box-center {
        background: #3e3d43;
    }

    .cf {
        zoom: 1;
    }

    @media (max-width: 1280px) {
        .box-center {
            margin: 0 auto;
            width: 990px;
        }
    }

    .pin-nav-wrap .min-user li {
        position: relative;
        z-index: 11;
    }

    .pin-nav-wrap .nav-list li {
        float: left;
    }

    .book-shelf a {
        color: #fff;
    }

    .pin-nav-wrap .min-user li.book-shelf i {
        margin-left: 5px;
    }

    cite,
    em,
    i {
        font-style: normal;
    }

    .search-container {
        margin-top: 80px;
        height: 40px;
        padding: 30px 0 16px;
    }

    .cf {
        zoom: 1;
    }

    @media (max-width: 1280px) {
        .box-center {
            margin: 0 auto;
            width: 990px;
        }
    }

    .box-center {
        margin-left: auto;
        margin-right: auto;
        width: 1200px;
    }

    .logo-wrap .book-shelf,
    .search-wrap {
        margin: 0 auto;
        width: 640px;
    }

    .logo-wrap .book-shelf input,
    .search-wrap input {
        border: 1px solid #dbdbdb;
        border-right: none;
        float: left;
        font: 14px / 38px PingFangSC-Regular, HelveticaNeue-Light, Helvetica Neue Light, Microsoft YaHei, "sans-serif";
        height: 38px;
        line-height: 38px;
        padding: 0 12px;
        width: 518px;
    }

    button,
    input {
        border: none;
        outline: none;
    }

    .logo-wrap .book-shelf .search-btn,
    .search-wrap .search-btn {
        background: #bf2c24;
        color: #fff;
        float: left;
        font: 18px / 40px FZZCYSK;
        height: 40px;
        letter-spacing: 4px;
        text-align: center;
        text-indent: 5px;
        width: 80px;
    }

    .loaded a {
        transition: color .3s, background-color .3s;
    }
    .cf {
    zoom: 1;
}
@media (max-width: 1280px) {
    .box-center {
        margin: 0 auto;
        width: 990px;
    }
}

.box-center {
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
}
.result-wrap {
    padding: 0 0 30px;
}
.fl {
    float: left;
}
@media (max-width: 1280px) {
    .main-content-wrap {
        width: 744px;
    }
}
.main-content-wrap {
    width: 954px;
}
.book-img-text li:first-child {
    border-top: none;
    padding-top: 0;
}
.book-img-text li {
    border-top: 1px solid #e6e6e6;
    height: 162px;
    padding-top: 25px;
}
.book-img-text .book-img-box {
    height: 136px;
    margin-right: 16px;
    position: relative;
    width: 102px;
    z-index: 3;
}
.book-img-text .book-img-box, .book-img-text .book-mid-info {
    float: left;
}
.book-img-text .book-img-box a {
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    display: block;
    height: 136px;
    overflow: hidden;
    width: 102px;
}
.loaded a {
    transition: color .3s, background-color .3s;
}
a {
    color: #262626;
    outline: none;
    text-decoration: none;
}
.book-img-text .book-img-box a img {
    height: 136px;
    -webkit-transition: -webkit-transform .4s ease-out;
    -moz-transition: -moz-transform .4s ease-out;
    -ms-transition: -ms-transform .4s ease-out;
    transition: transform .4s ease-out;
    width: 102px;
}
a img {
    border: none;
}
fieldset, img {
    border: 0;
}
@media (max-width: 1280px) {
    .book-img-text .book-mid-info {
        width: 380px;
    }
}
@media (max-width: 1280px) {
    .book-img-text .book-mid-info {
        width: 380px;
    }
}
.book-img-text .book-mid-info {
    margin-top: 5px;
    width: 542px;
}
.book-img-text .book-img-box, .book-img-text .book-mid-info {
    float: left;
}
.book-img-text .book-mid-info h3 {
    font: 18px / 24px PingFangSC-Regular, HelveticaNeue-Light, Helvetica Neue Light, Microsoft YaHei, "sans-serif";
    height: 24px;
    margin-bottom: 8px;
    overflow: hidden;
}
.book-info-title {
    font: 18px / 24px PingFangSC-Regular, HelveticaNeue-Light, Helvetica Neue Light, Microsoft YaHei, sans-serif;
    height: 24px;
    margin-bottom: 8px;
    overflow: hidden;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 14px;
}
.book-img-text .book-mid-info h3 cite.red-kw {
    color: #bf2c24;
}
cite, em, i {
    font-style: normal;
}
.book-img-text .book-mid-info p.author, .book-list-wrap .book-list li, .classify-list dd, .main-nav li.web .game-dropdown .lately dd, .other-rec-wrap li .book-info .author, .search-filter li {
    overflow: hidden;
}
.book-img-text .book-mid-info p.author {
    height: 16px;
    margin-bottom: 6px;
    overflow: hidden;
}
.book-img-text .book-mid-info p {
    font-family: PingFangSC-Regular, -apple-system, Simsun;
    font-size: 12px;
}
p {
    word-wrap: break-word;
    word-break: break-all;
}
.book-img-text .book-mid-info p.author img {
    float: left;
    height: 14px;
    margin: 1px 5px 0 0;
    width: 14px;
}
fieldset, img {
    border: 0;
}
@media (max-width: 1280px) {
    .book-img-text .book-mid-info p.author a.name {
        max-width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }
}
.book-img-text .book-mid-info p.author a {
    color: #a6a6a6;
    float: left;
    line-height: 16px;
}
.author a {
    cursor: pointer;
}
.book-img-text .book-mid-info p.author em {
    color: #e6e6e6;
    float: left;
    font-family: Arial;
    margin: 1px 8px 0;
}
.book-img-text .book-mid-info p.author a {
    color: #a6a6a6;
    float: left;
    line-height: 16px;
}
.author a {
    cursor: pointer;
}
.book-img-text .book-mid-info p.author em {
    color: #e6e6e6;
    float: left;
    font-family: Arial;
    margin: 1px 8px 0;
}
.book-img-text .book-mid-info p.author span {
    color: #a6a6a6;
    float: left;
    line-height: 16px;
}
.book-img-text .book-mid-info p.intro {
    color: #666;
    font-size: 14px;
    height: 48px;
    line-height: 24px;
    margin-bottom: 8px;
    overflow: hidden;
}
.book-img-text .book-mid-info p {
    font-family: PingFangSC-Regular, -apple-system, Simsun;
    font-size: 12px;
}
.book-img-text .book-mid-info p.update {
    line-height: 22px;
    white-space: nowrap;
}
.book-img-text .book-mid-info p {
    font-family: PingFangSC-Regular, -apple-system, Simsun;
    font-size: 12px;
}
.book-img-text .book-mid-info p.update a {
    max-width: calc(100% - 100px);
}
.book-img-text .book-mid-info p.update a {
    color: #3f5a93;
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}
.loaded a {
    transition: color .3s, background-color .3s;
}
a {
    color: #262626;
    outline: none;
    text-decoration: none;
}
.book-img-text .book-mid-info p.update em, .book-img-text .book-mid-info p.update span {
    color: #b5b5b5;
    display: inline-block;
    vertical-align: middle;
}
.book-img-text .book-mid-info p.update em {
    font-family: Arial;
    margin: 0 5px;
}
.book-img-text .book-mid-info p.update em, .book-img-text .book-mid-info p.update span {
    color: #b5b5b5;
    display: inline-block;
    vertical-align: middle;
}
.book-img-text .book-right-info {
    height: 136px;
    margin-top: 5px;
    position: relative;
    width: 224px;
}
.book-img-text .book-right-info {
    float: right;
}
.book-img-text .book-right-info .total {
    text-align: right;
}
.book-img-text .book-right-info .btn {
    bottom: 4px;
    font-size: 0;
    left: 0;
    position: absolute;
}
.book-img-text .book-right-info .btn a.red-btn {
    background: #bf2c24;
    border-color: #bf2c24;
    color: #fff;
    margin-right: 24px;
}
.book-img-text .book-right-info .btn a {
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    font: 14px / 32px PingFangSC-Regular, -apple-system, Simsun;
    height: 32px;
    text-align: center;
    vertical-align: middle;
    width: 98px;
}
.loaded a {
    transition: color .3s, background-color .3s;
}
.red-btn {
    background: #bf2c24;
    border-color: #bf2c24;
    color: #fff;
    position: relative;
    text-align: center;
    z-index: 1;
}
.book-img-text .book-right-info .btn a.blue-btn {
    
}
.book-img-text .book-right-info .btn a {
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    font: 14px / 32px PingFangSC-Regular, -apple-system, Simsun;
    height: 32px;
    text-align: center;
    vertical-align: middle;
    width: 98px;
}
.loaded a {
    transition: color .3s, background-color .3s;
}
.blue-btn {
    border-color: #3f5a93;
    color: #3f5a93;
    position: relative;
    text-align: center;
    z-index: 1;
}
.result-wrap{
    margin-top: 30px;
   
    height: 130px;
    width: 900px;
}
.search-container{
    padding-top: 100px;
    height: 70px;
    margin: auto;
    width: 900px;
}
.add-book{
	 transition: background-color 0.5s; 
}
.add-book:hover{
	background-color: #bf2c24;
	color: #fff;
}
.writer_header{
    width: 100px;
    height: 100px;
    margin-left: 300px;
    position: relative;
    
}
.writer_name{
    position: relative;
}
.writer_header>img{
    border-radius: 50%;
    margin-top: 50px;

}
.allnovel{
    width: 990px;
    height: 50px;
    margin: auto;
    background-color: rgb(247,246,242);
    text-align: center;
}
.allnovel>h1{
    font-size: 30px;
}
.writer_name>h3{
    font-size: 25px;
    margin-top: 50px;
    font-weight: bold;
}
.writer_name{
    line-height: 35px;
    color: white;
}
.writer_header,.writer_name{
    display: inline-block;
}
.first{
    margin-left: 200px;
}
</style>
</head>
<body style="zoom: 1">
    <div>
        <div id="pin-nav" class="pin-nav-wrap">
            <div class="writer_header">
                <img src="image/100.jpg" alt="">
            </div>
            <div class="writer_name">
                <h3>${list1.get(0).writerName }</h3>
                 <p>作品数量:${novelnum }</p>
                	作品字数:${contentnum }
            </div>
        </div>
        <div class="first"><a href="index.jsp">首页</a></div>
    </div>
    <div class="allnovel">
        <h1>所有作品</h1>
    </div>
    <div class="result-wrap box-center cf">
        <div class="main-content-wrap fl">

            <div id="result-list" data-l1="3">
                <div class="book-img-text">
                    <ul>
                    <c:forEach items="${list }" var="list">
                        <li class="res-book-item jsAutoReport">
                            <div class="book-img-box">
                                <a href="http://localhost:8080/endPoint/ShuServlet?novelId=${list.novelId }" target="_blank" rel="nofollow"><img src="image/${list.novelImgURL }"></a></div>
                            <div class="book-mid-info">
                                <h3 class="book-info-title">
                                    <a title="" href="http://localhost:8080/endPoint/MessageServlet?mytext=%E5%A4%A9" target="_blank">
                                        <cite class="red-kw">${list.novelName }</cite> 
                                    </a>
                                </h3>
                                <p class="author">
                                    <img src="http://localhost:8080/endPoint/MessageServlet?mytext=%E5%A4%A9">
                                    <a rel="nofollow" class="name" href="http://localhost:8080/endPoint/MessageServlet?mytext=%E5%A4%A9" target="_blank">${list.writerName }</a> <em>|</em>
                                        <a rel="nofollow" href="http://localhost:8080/endPoint/selectBookByTypeServlet?typeName=${list.novelType1 }" target="_blank">${list.novelType1 }</a>
                                        <em>|</em><a rel="nofollow" href="http://localhost:8080/endPoint/selectBookByTypeServlet?typeName=${list.novelType2 }" target="_blank">${list.novelType2 }</a></p>
                                <p class="intro m3">
                                    ${list.novelIntroduction }
                                </p>
                                <p class="update">
                                    <a href="http://localhost:8080/endPoint/MessageServlet?mytext=%E5%A4%A9" target="_blank">正在更新</a><em>·</em><span>优质小说</span></p>
                            </div>
                            <div class="book-right-info">
                                <p class="btn">
                                 <a rel="nofollow" class="red-btn" href="http://localhost:8080/endPoint/ShuServlet?novelId=${list.novelId }" target="_blank">书籍详情</a>		 
                                </p>
                            </div>
                        </li>
                     </c:forEach>
                        <p>到底了哦</p>	
                </ul>
            </div>
        </div>
    </div>
    </div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
	  // 获取div元素
	  var submitButton = document.getElementById('search-btn');
	  
	  // 给div添加点击事件
	  submitButton.addEventListener('click', function() {
	    // 获取表单元素
	    var form = document.getElementById('myForm');
	    
	    // 触发表单的submit事件
	    form.submit();
	  });
	});
function two_like(novelid){
	 event.preventDefault();
	$.ajax({
		"type":"get",
		"url":"InsertLikeservlet",
		"datatype":"text",
		"data":"novelid="+novelid,
		"success":function(dataJson){
				$("#"+dataJson).text("已加入书架");
				$("#"+dataJson).css("pointer-events","none");
				
		}
	});
}
</script></body></html>